import { motion } from 'framer-motion';

interface RoleInfoProps {
  role: any;
}

export default function RoleInfo({ role }: RoleInfoProps) {
  if (!role) return null;

  return (
    <motion.div 
      className="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div className="relative h-48 overflow-hidden">
        <img 
          src={`https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=fantasy%20landscape%20background&sign=9b17ec783b2f623ac6d9cf12ef88cdc8`} 
          alt="背景" 
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
      </div>
      
      <div className="px-6 pt-6 pb-8">
        <div className="flex justify-center -mt-20">
          <div className="w-32 h-32 rounded-full border-4 border-white shadow-lg overflow-hidden">
            <img 
              src={role.image} 
              alt={role.name} 
              className="w-full h-full object-cover"
            />
          </div>
        </div>
        
        <div className="text-center mt-4">
          <h2 className="text-2xl font-bold text-gray-800">{role.name}</h2>
          <p className="text-gray-600 mt-2">{role.description}</p>
        </div>
        
        <div className="mt-6">
          <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">性格特点</h3>
          <p className="mt-2 text-gray-700">{role.personality}</p>
        </div>
        
        <div className="mt-6">
          <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">能力</h3>
          <div className="flex flex-wrap gap-2 mt-2">
            {role.abilities.map((ability: string, index: number) => (
              <span 
                key={index} 
                className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
              >
                {ability}
              </span>
            ))}
          </div>
        </div>
      </div>
    </motion.div>
  );
}